
<template>
<div class="test">
<div class="box">
  <MdEditor @onUploadImg="onUploadImg" @onSave="save" v-model="state.modelValue" :previewOnly="state.previewOnly" :key="state.previewOnly"/>
</div>
<div class="title">
  <Topicfy :heads="state.topicfyList" />
</div>
</div>
</template>

<script setup>
import MdEditor from './components/MavonEditor/index.jsx'
import Topicfy from './components/MavonEditor/Topicfy.jsx'
import { ref, reactive} from 'vue'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

let state = reactive({
    modelValue: "# 开放平台API列表与调用方法\n\n## 一.REST API列表\n\n### 1.平台租户（学校）基础数据\n  \n* **学生信息**\n  \n| 功能说明     | 接口 |\n| ------------ | ------ |\n| 单个学生查询 | [/cloud-open/open/v2/system/student/get](#singlestu)  |\n| 批量学生查询 | [/cloud-open/open/v2/system/student/list](#liststu) |\n| 分页学生查询 | [/cloud-open/open/v2/system/student/page](#pagingstu) |\n  \n  * **教职⼯信息**\n  \n| 功能说明       | 接口 |\n| -------------- | ----- |\n| 单个教职工查询 | [/cloud-open/open/v2/system/teacher/get](#singletea)  |\n| 批量教职工查询 | [/cloud-open/open/v2/system/teacher/list](#listtea) |\n| 分页教职工查询 | [/cloud-open/open/v2/system/teacher/page](#pagingtea) |\n  \n  * **学籍信息**\n  \n| 功能说明 | 接口 |\n| -------- | ------- |\n| 学籍查询 | [/cloud-open/open/v2/system/schoolroll/list](#schoolroll) |\n  \n  * **部⻔信息**\n  \n| 功能说明 | 接口 |\n| -------- | ------- |\n| 部门查询 | [/cloud-open/open/v2/system/department/list](#department) |\n  \n  * **学校信息**\n  \n| 功能说明 | 接口 |\n| -------- | ------- |\n| 学校查询 | [/cloud-open/open/v2/system/school/get](#school) |\n\n### 2.开发者应用业务数据\n\n  * 业务数据推送\n  \n| 功能说明 | 接口                              |\n| -------- | --------------------------------- |\n| 数据推送 | [/cloud-open/open/v2/develop/data/push](#datapush) |\n  \n## 二.API调用方法\n### 1.基础数据\n\n#### 学生信息\n\n##### <span id = \"singlestu\"> 单个学生查询 \n</span>\n\n* 功能说明\n\n  > 本接口用于查询单个学生信息。\n\n* 请求调用 URL 示例\n\n  ```tex\n  https://domain:port/cloud-open/open/v2/system/student/get\n  ```\n\n* 请求参数说明\n\n  * 请求参数样式\n\n    ```json\n    {\n        \"YHID\": 1450051647046254594,\n        \"XXID\": 1450051646358388738\n    }\n    ```\n\n  * 请求参数说明\n  \n| 参数 | 类型 | 属性 | 说明   |\n| ---- | ---- | ---- | ------ |\n| YHID | Long | 必填 | 用户id |\n| XXID | Long | 必填 | 学校id |\n\n\n* 响应参数说明\n\n  * 响应参数样式\n\n    ```json\n    {\n    \t\"code\": 200,\n    \t\"message\": \"success\",\n    \t\"data\": {\n    \t\t\"YHID\": \"1450052446518345729\",\n    \t\t\"XM\": \"崔娟传\",\n            \"SJH\": \"14798762753\",\n    \t\t\"KH\": \"1693619005\",\n    \t\t\"SFZ\": \"110101199203072441\",\n    \t\t\"RN\": \"https://domain.name.com/face_img/8468123.jpg\",\n    \t\t\"BJID\": \"1450052433880907777\",\n    \t\t\"BJMC\": \"一年级1班\",\n    \t\t\"XJID\": \"1450052431234301954\",\n    \t\t\"XJMC\": \"一年级\",\n            \"SCBS\": 0\n    \t}\n    }\n    ```\n    \n  * 响应参数说明\n  \n| 参数 | 类型    | 说明                           |\n| ---- | ------- | ------------------------------ |\n| YHID | Long    | 用户id                         |\n| XM   | String  | 姓名                           |\n| SJH  | String  | 手机号（多个手机号用逗号分割） |\n| KH   | String  | 卡号                           |\n| SFZ  | String  | 身份证                         |\n| RN   | String  | 人脸                           |\n| BJID | Long    | 班级id                         |\n| BJMC | String  | 班级名称                       |\n| XJID | Long    | 学籍id                         |\n| XJMC | String  | 学籍名称                       |\n| SCBS | Integer | 是否删除（0否、1是）           |\n\n\n\n##### <span id = \"liststu\">学生批量查询</span>\n\n* 功能说明\n\n  > 本接口用于批量查询学生信息。\n\n* 请求调用 URL 示例\n\n  ```tex\n  https://domain:port/cloud-open/open/v2/system/student/list\n  ```\n\n* 请求参数说明\n\n  * 请求参数样式\n\n    ```json\n    {\n    \t\"YHIDS\": [\n    \t\t1450052446518345729,\n    \t\t1450052448279953410\n    \t],\n        \"XXID\": 1450051646358388700,\n    }\n    ```\n    \n  * 请求参数说明\n\n| 参数  | 类型        | 属性 | 说明         |\n| ----- | ----------- | ---- | ------------ |\n| YHIDS | Array<Long> | 必填 | 用户 id 集合 |\n| XXID  | Long        | 必填 | 学校 id      |\n\n* 响应参数说明\n\n  * 响应参数样式\n\n    ```json\n    {\n        \"code\": 200,\n    \t\"message\": \"success\",\n    \t\"data\": [\n            {\n                \"YHID\": 1450052446518345729,\n                \"XM\": \"崔娟传\",\n                \"JSH\": \"18200001234\",\n                \"KH\": \"1693619005\",\n                \"SFZ\": \"110101199203072441\",\n                \"RN\": \"https://domain.name.com/face_img/8468123.jpg\",\n                \"BJID\": 1450052433880907777,\n                \"BJMC\": \"一年级1班741\",\n                \"XJID\": 1450052431234301954,\n                \"XJMC\": \"一年级\",\n                \"SCBS\": 0\n    \t\t},\n    \t\t{\n                \"YHID\": 1450052448279953410,\n                \"XM\": \"崔娟传\",\n                \"JSH\": \"18200001234\",\n                \"KH\": \"1693619005\",\n                \"SFZ\": \"110101199203072441\",\n                \"RN\": \"https://domain.name.com/face_img/8468123.jpg\",\n                \"BJID\": 1450052433880907777,\n                \"BJMC\": \"一年级1班741\",\n                \"NJID\": 1450052431234301954,\n                \"NJMC\": \"一年级\",\n                \"SCBS\": 0\n        \t}\n    \t]\n    }\n    ```\n    \n  * 响应参数说明\n  \n| 参数 | 类型 | 说明 |\n| ---- | ---- | ---- |\n| YHID | Long    | 用户id                         |\n| XM   | String  | 姓名                           |\n| SJH  | String  | 手机号（多个手机号用逗号分割） |\n| KH   | String  | 卡号                           |\n| SFZ  | String  | 身份证                         |\n| RN   | String  | 人脸                           |\n| BJID | Long    | 班级id                         |\n| BJMC | String  | 班级名称                       |\n| XJID | Long    | 学籍id                         |\n| XJMC | String  | 学籍名称                       |\n| SCBS | Integer | 是否删除（0否、1是） |\n  \n\n\n\n##### <span id= \"pagingstu\">学生分页查询</span>\n\n* 功能说明\n\n  > 本接口用于分页查询学生信息。\n\n* 请求调用 URL 示例\n\n  ```tex\n  https://domain:port/cloud-open/open/v2/system/student/page\n  ```\n\n* 请求参数说明\n\n  * 请求参数样式\n\n    ```json\n    {\n      \"XXID\": 1450051646358388738,\n      \"DQY\": 1,\n      \"YDX\": 100\n    }\n    ```\n\n  * 请求参数说明\n  \n| 参数 | 类型    | 属性 | 说明                |\n| ---- | ------- | ---- | ------------------- |\n| XXID | Long    | 必填 | 学校id              |\n| DQY  | Integer | 必填 | 当前页（默认：1）   |\n| YDX  | Integer | 必填 | 页大小（默认：100） |\n\n\n* 响应参数说明\n\n  * 响应参数样式\n\n    ```json\n    {\n    \t\"code\": 200,\n    \t\"message\": \"success\",\n    \t\"data\": {\n    \t\t\"total\": 128,\n    \t\t\"list\": [\n                {\n                    \"YHID\": 1450052448279953410,\n                    \"XM\": \"崔娟传\",\n                    \"JSH\": \"18200001234\",\n                    \"KH\": \"1693619005\",\n                    \"SFZ\": \"110101199203072441\",\n                    \"RN\": \"https://domain.name.com/face_img/8468123.jpg\",\n                    \"BJID\": 1450052433880907777,\n                    \"BJMC\": \"一年级1班741\",\n                    \"NJID\": 1450052431234301954,\n                    \"NJMC\": \"一年级\",\n                    \"SCBS\": 0\n    \t\t\t},\n    \t\t\t{\n    \t\t\t\t\"YHID\": 1450052448279953410,\n                    \"XM\": \"崔娟传\",\n                    \"JSH\": \"18200001234\",\n                    \"KH\": \"1693619005\",\n                    \"SFZ\": \"110101199203072441\",\n                    \"RN\": \"https://domain.name.com/face_img/8468123.jpg\",\n                    \"BJID\": 1450052433880907777,\n                    \"BJMC\": \"一年级1班741\",\n                    \"NJID\": 1450052431234301954,\n                    \"NJMC\": \"一年级\",\n                    \"SCBS\": 0\n    \t\t\t}\n    \t\t]\n    \t}\n    }\n    ```\n  \n  * 响应参数说明\n  \n| 参数 | 类型 | 说明 |\n| ---- | ---- | ---- |\n| YHID | Long    | 用户id                         |\n| XM   | String  | 姓名                           |\n| SJH  | String  | 手机号（多个手机号用逗号分割） |\n| KH   | String  | 卡号                           |\n| SFZ  | String  | 身份证                         |\n| RN   | String  | 人脸                           |\n| BJID | Long    | 班级id                         |\n| BJMC | String  | 班级名称                       |\n| XJID | Long    | 学籍id                         |\n| XJMC | String  | 学籍名称                       |\n| SCBS | Integer | 是否删除（0否、1是） |\n  \n\n\n\n#### 教职工信息\n\n\n##### <span id = \"singletea\">教职工单个查询</span>\n\n* 功能说明\n\n  > 本接口用于查询单个教职工信息。\n\n* 请求调用 URL 示例\n\n  ```tex\n  https://domain:port/cloud-open/open/v2/system/teacher/get\n  ```\n\n* 请求参数说明\n\n  * 请求参数样式\n\n    ```json\n    {\n        \"YHID\": 1450051647046254594,\n    \t\"XXID\": 1450051646358388738\n    }\n    ```\n\n  * 请求参数说明\n  \n| 参数 | 类型 | 属性 | 说明   |\n| ---- | ---- | ---- | ------ |\n| YHID | Long | 必填 | 用户id |\n| XXID | Long | 必填 | 学校id |\n\n\n* 响应参数说明\n\n  * 响应参数样式\n\n    ```json\n    {\n        \"code\": 200,\n    \t\"message\": \"success\",\n    \t\"data\": {\n            \"YHID\": 1450337077968863234,\n    \t\t\"XM\": \"曾铭景\",\n            \"SJH\": \"13826359355\",\n    \t\t\"KH\": \"0\",\n    \t\t\"SFZ\": \"110101199003070556\",\n    \t\t\"RN\": \"3\",\n    \t\t\"BMID\": \"1450336893662756865,1450337075649413122,1450337094821576705\",\n    \t\t\"BMMC\": \"劳动与技术组,历史与社会组,英语组\",\n    \t\t\"SCBS\": 0\n    \t}\n    }\n    ```\n    \n  * 响应参数说明\n  \n| 参数 | 类型    | 说明                           |\n| ---- | ------- | ------------------------------ |\n| YHID | Long    | 用户id                         |\n| XM   | String  | 姓名                           |\n| SJH  | String  | 手机号                         |\n| KH   | String  | 卡号                           |\n| SFZ  | String  | 身份证                         |\n| RN   | String  | 人脸                           |\n| BMID | String  | 部门id（多个部门用逗号隔开）   |\n| BMMC | String  | 部门名称（多个部门用逗号隔开） |\n| SCBS | Integer | 是否删除（0否、1是）           |\n  \n\n\n\n##### <span id=\"listtea\">教职工批量查询</span>\n\n* 功能说明\n\n  > 本接口用于批量查询教职工信息。\n\n* 请求调用 URL 示例\n\n  ```tex\n  https://domain:port/cloud-open/open/v2/system/teacher/list\n  ```\n\n* 请求参数说明\n\n  * 请求参数样式\n\n    ```json\n    {\n        \"YHIDS\": [\n            1450336893662756865, 1450337075649413122\n        ],\n        \"XXID\": 1450051646358388738\n    }\n    ```\n    \n  * 请求参数说明\n\n| 参数  | 类型  | 属性 | 说明       |\n| ----- | ----- | ---- | ---------- |\n| YHIDS | Array | 必填 | 用户id集合 |\n| XXID  | Long  | 必填 | 学校id     |\n\n* 响应参数说明\n\n  * 响应参数样式\n\n    ```json\n    {\n        \"code\": 200,\n        \"message\": \"success\",\n        \"data\": [\n            {\n                \"YHID\": 1450337077968863234,\n                \"XM\": \"曾铭景\",\n                \"SJH\": \"13826359355\",\n                \"KH\": \"0\",\n                \"SFZ\": \"110101199003070556\",\n                \"RN\": \"3\",\n                \"BMID\": \"1450336893662756865,1450337075649413122,1450337094821576705\",\n                \"BMMC\": \"劳动与技术组,历史与社会组,英语组\",\n                \"SCBS\": 0\n    \t\t},\n    \t\t{\n                \"YHID\": 1450337077968863234,\n                \"XM\": \"曾铭景\",\n                \"SJH\": \"13826359355\",\n                \"KH\": \"0\",\n                \"SFZ\": \"110101199003070556\",\n                \"RN\": \"3\",\n                \"BMID\": \"1450336893662756865,1450337075649413122,1450337094821576705\",\n                \"BMMC\": \"劳动与技术组,历史与社会组,英语组\",\n                \"SCBS\": 0\n    \t\t}\n    \t]\n    }\n    ```\n    \n  * 响应参数说明\n  \n| 参数 | 类型 | 说明 |\n| ---- | ---- | ---- |\n| YHID | Long    | 用户id      ... (16147 total length)",
    topicfyList: [],
    //md编辑器的previewOnly 为true是预览模式  false是编辑模式
    previewOnly: false,
})

const save= () =>{
   state.previewOnly=true
}

// 上传图片
const onUploadImg =  async (files, callback) => {
    const resdata =  await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);
        上传请求api(form).then((res) => {
            rev(res.data)
        }).catch((error) => {rej(error)
        message.error('上传文件失败')
        })
      });
    })
  );
 callback(resdata.map((item) => item.url));
}
// 标题数
let count = 0
// 记录标题内容
let headstemp = []

// marked设置
const rendererMD = new marked.Renderer()

// 调整标题内容
rendererMD.heading = (text, level) => {
    headstemp.push({ text, level })
    count++
    return `<h${level} id="heading-${count}"><span class="h-text">${text}</span></h${level}>`
}
// // 设置图片内容，统一显示一张缓存图，用于懒加载~
// rendererMD.image = (href, _, text) =>
//     `<img data-src="${href}" src="/cos/2020/1211175603.png" alt="${text}" >`

marked.setOptions({
    highlight(code) {
        return hljs.highlightAuto(code).value
    },
    renderer: rendererMD
})

const getMdTitleList = (md) => {
    headstemp = []
    marked(md)
    return headstemp;
}

let list = getMdTitleList(state.modelValue)
state.topicfyList = list;
</script>


<style>
.test{
  display: flex;
}
.title{
  margin-left: 150px;
  margin-top: 50px;
}
.box{
  overflow: hidden auto;
  margin-top: 50px;
  width: 1000px;
  height: 800px;
}
</style>
